<template>
  <div>
    <!-- 省 -->
    <div class="zhandiandiz" v-if="isshowss">
      <span>省/市/区/街</span>
      <el-select
        v-model="sValue"
        placeholder="Please Select省份"
        @change="sZhandiandizhi($event)"
        class="szddz"
      >
        <el-option
          v-for="item in sOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 市 -->
      <el-select
        v-model="cValue"
        placeholder="Please Select城市"
        @change="cZhandiandizhi($event)"
        class="czddz"
      >
        <el-option
          v-for="item in cOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 区 -->
      <el-select
        v-model="qValue"
        placeholder="Please Select区/县"
        @change="qZhandiandizhi($event)"
        class="qzddz"
      >
        <el-option
          v-for="(item, index) in qOption"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 街 -->
      <el-select
        v-model="jValue"
        placeholder="Please Select街道"
        @change="jZhandiandizhi($event)"
        class="jzddz"
      >
        <el-option
          v-for="(item, index) in jOption"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pt: "116.331398, 39.897445", //
      isshowss: false, //Control省市区街显示隐藏
      sValue: "", //Edit页面 站点地址 选项的值(省)
      sLabel: "", //Edit页面 站点地址 选项的键名(省)
      sJingwei: "", //Edit页面 站点地址 选项的经纬度(省)
      sOption: [], //Edit页面 站点地址 Data源(省)
      cValue: "", //Edit页面 站点地址 选项的值(市)
      cLabel: "", //Edit页面 站点地址 选项的键名(市)
      cJingwei: "", //Edit页面 站点地址 选项的经纬度(市)
      cOption: [], //Edit页面 站点地址 Data源(市)
      qValue: "", //Edit页面 站点地址 选项的值(区)
      qLabel: "", //Edit页面 站点地址 选项的键名(区)
      qJingwei: "", //Edit页面 站点地址 选项的经纬度(区)
      qOption: [], //Edit页面 站点地址 Data源(区)
      jValue: "", //Edit页面 站点地址 选项的值(街道)
      jLabel: "", //Edit页面 站点地址 选项的键名(街道)
      jJingwei: "", //Edit页面 站点地址 选项的经纬度(街道)
      jOption: [] //Edit页面 站点地址 Data源(街道)
    };
  },

  mounted() {
    this.init();
  },
  updated() {
    // 选择省市区街下拉框，Edit页面的站点地址会改变
    if (this.sLabel && !this.cLabel && !this.qLabel && !this.jLabel) {
      this.formData2.address = "";
      this.formData2.address = this.sLabel;
    } else if (this.sLabel && this.cLabel && !this.qLabel && !this.jLabel) {
      this.formData2.address = "";
      this.formData2.address = this.sLabel + this.cLabel;
    } else if (this.sLabel && this.cLabel && this.qLabel && !this.jLabel) {
      this.formData2.address = "";
      this.formData2.address = this.sLabel + this.cLabel + this.qLabel;
    } else if (this.sLabel && this.cLabel && this.qLabel && this.jLabel) {
      this.formData2.address = "";
      this.formData2.address =
        this.sLabel + this.cLabel + this.qLabel + this.jLabel;
    } else {
    }
  },
  watch: {
    // 监听省，如果下拉框的省发生改变，就会发送请求，更新市的Data
    sLabel(newV, oldV) {
      if (newV !== oldV) {
        // 调用Edit页面 --站点地址-- 城市（Data） 的方法
        this.czhandianfangfa(this.sLabel, this.sValue);
        // 当重新选择省，市区街和站点地址情况，重新更新
        this.cLabel = "";
        this.qLabel = "";
        this.jLabel = "";
        this.cValue = "";
        this.qValue = "";
        this.jValue = "";
      }
    },
    // 监听市，如果下拉框的市发生改变，就会发送请求，更新区的Data
    cLabel(newV, oldV) {
      if (newV !== oldV) {
        // 调用Edit页面 --站点地址-- 区（Data） 的方法
        this.qzhandianfangfa(this.cLabel, this.cValue);
        // 当重新选择市，区街和站点地址情况，重新更新
        this.qLabel = "";
        this.jLabel = "";
        this.qValue = "";
        this.jValue = "";
      }
    },
    // 监听区，如果下拉框的区发生改变，就会发送请求，更新街道的Data
    qLabel(newV, oldV) {
      if (newV !== oldV) {
        // 调用Edit页面 --站点地址-- 街道（Data） 的方法
        this.jzhandianfangfa(this.qLabel, this.qValue);
        // 当重新选择区，街和站点地址情况，重新更新

        this.jLabel = "";
        this.jValue = "";
      }
    },
    // 监听街道，如果下拉框的街道发生改变，就会发送请求，更新街道的Data
    // jValue(newV, oldV) {
    //   if (newV !== oldV) {
    //     console.log(newV, oldV);
    //     // 调用Edit页面 --站点地址-- 街道（Data） 的方法
    //     // this.jzhandianfangfa(this.qLabel, this.qValue)
    //   }
    // },
    lng(newV, oldV) {
      if (newV !== oldV) {
        console.log(newV, oldV, "===============");
      }
    }
  },
  methods: {
    // // Edit页面 站点地址 的点击方法(省)
    sZhandiandizhi(value) {
      // console.log(value);
      let sObj = {};
      sObj = this.sOption.find(item => {
        //这里的sOption就是上面遍历的Data源
        return item.value === value; //筛选出匹配Data
      });
      this.sLabel = sObj.label; //拿到键名
      this.sOption.find(item => {
        //经纬度
        if (item.value === value) {
          this.sJingwei = item.jingwei;
        }
      });
      //拿到后端返回的经纬度，赋值给地图上的经纬度
      this.formData2.lng = this.sJingwei.split(",")[0];
      this.formData2.lat = this.sJingwei.split(",")[1];
      this.pt = this.sJingwei;
    },

    // // Edit页面 站点地址 的点击方法(市)
    cZhandiandizhi(value) {
      // console.log(value);
      let cObj = {};
      cObj = this.cOption.find(item => {
        //这里的cOption就是上面遍历的Data源
        return item.value === value; //筛选出匹配Data
      });
      this.cLabel = cObj.label; //拿到键名
      this.cOption.find(item => {
        //经纬度
        if (item.value === value) {
          this.cJingwei = item.jingwei;
        }
      });
      //拿到后端返回的经纬度，赋值给地图上的经纬度
      this.formData2.lng = this.cJingwei.split(",")[0];
      this.formData2.lat = this.cJingwei.split(",")[1];
      this.pt = this.cJingwei;
    },
    // // Edit页面 站点地址 的点击方法(区)
    qZhandiandizhi(value) {
      let qObj = {};
      qObj = this.qOption.find(item => {
        //这里的cOption就是上面遍历的Data源
        return item.value === value; //筛选出匹配Data
      });
      this.qLabel = qObj.label; //拿到键名
      this.qOption.find(item => {
        //经纬度
        if (item.value === value) {
          this.qJingwei = item.jingwei;
        }
      });
      //拿到后端返回的经纬度，赋值给地图上的经纬度
      this.formData2.lng = this.qJingwei.split(",")[0];
      this.formData2.lat = this.qJingwei.split(",")[1];
      this.pt = this.qJingwei;
    },

    // // Edit页面 站点地址 的点击方法(街道)
    jZhandiandizhi(value) {
      let jObj = {};
      jObj = this.jOption.find(item => {
        //这里的jOption就是上面遍历的Data源
        return item.value === value; //筛选出匹配Data
      });
      this.jLabel = jObj.label; //拿到键名
      console.log(this.jLabel);
      this.jOption.find(item => {
        //经纬度
        if (item.value === value) {
          this.jJingwei = item.jingwei;
        }
      });
      //拿到后端返回的经纬度，赋值给地图上的经纬度
      this.formData2.lng = this.jJingwei.split(",")[0];
      this.formData2.lat = this.jJingwei.split(",")[1];
      this.pt = this.jJingwei;
    },

    // // Edit页面地图 ---拿到城市（Data）
    czhandianfangfa(label, value) {
      this.cOption = []; //每次进来先清空城市的Data源
      this.apis
        .allAddressList({
          name: label,
          code: value
        })
        .then(res => {
          if (res.code === 0) {
            console.log(res);
            res.result.forEach(item => {
              let obj = {
                label: item.name,
                value: item.adcode,
                jingwei: item.center
              };
              this.cOption.push(obj);
            });
            console.log(this.cOption);
          }
        });
    },

    // // Edit页面地图 ---拿到区（Data）
    qzhandianfangfa(label, value) {
      this.qOption = []; //每次进来先清空区/县的Data源
      this.apis
        .allAddressList({
          name: label,
          code: value
        })
        .then(res => {
          if (res.code === 0) {
            res.result.forEach(item => {
              let obj = {
                label: item.name,
                value: item.adcode,
                jingwei: item.center
              };
              this.qOption.push(obj);
            });
          }
        });
    },
    // // Edit页面地图 ---拿到街道（Data）
    jzhandianfangfa(label, value) {
      this.jOption = []; //每次进来先清空街道的Data源
      this.apis
        .allAddressList({
          name: label,
          code: value
        })
        .then(res => {
          if (res.code === 0) {
            console.log(res);
            // 增加判断，如果镇下面没有街道，就直接让街道变成空
            if (res.result.length !== 0) {
              res.result.forEach(item => {
                let obj = {
                  label: item.name,
                  value: item.adcode,
                  jingwei: item.center
                };
                this.jOption.push(obj);
              });
            } else {
              this.jOption = [];
            }
          }
        });
    },
    async init() {
      // Edit页面 站点地址  ---拿到省份(Data)
      const addressRes = await this.apis.allAddressList({});
      if (addressRes.code === 0) {
        var array = new Array();
        addressRes.result.forEach(item => {
          let obj = {
            label: item.name,
            value: item.adcode,
            jingwei: item.center
          };
          this.sOption.push(obj);
          array.push(obj);
        });

        this.formCols2[
          this.labIndex2(this.formCols2, "address")
        ].options = array;
      }
    }
  },
  computed: {
    // 1
    // {
    //   label: "Add设备",
    //   type: "primary",
    //   handle: (e) => {
    //     this.formData2.id = null;
    //     this.isshowss = true;
    //     this.add();
    //   },
    // },
    // 2
    // {
    //       label: "Edit",
    //       type: "text",
    //       handle: (row) => {
    //         this.isshowss = false
    //         this.add(row)
    //       },
    //     },
    // 3
    // {
    //   type: "select",
    //   label: "关联Package",
    //   placeholder: "Please Enter",
    //   width: 350,
    //   prop: "mealId",
    // },
    // { //只有Add才有，Edit没有
    //   type: "",
    //   isShow: () => {
    //     return !this.formData2.id ? true : false;
    //   },
    // },
  }
};
</script>
<style scoped lang="scss">
// ControlEdit页面 站点地址的长度
.szddz {
  width: 130px;
}

.czddz {
  width: 130px;
}

.qzddz {
  width: 130px;
}

.jzddz {
  width: 130px;
}

.zhandiandiz {
  position: relative;
  // top: -351px;
  top: -370px;
  left: 70px;
}

.zhandiandiz > span {
  margin-right: 10px;
}
</style>
